<template>
  <q-page padding>
    <q-jumbotron>
      <div class="q-display-3">欢迎使用人群分类在线工具！</div>
      <div class="q-subheading">
        请登入令牌，如果你没有发现登陆界面，请点击菜单图标<q-chip icon="menu" color="primary" square dense />
      </div>
      <hr class="q-hr q-my-lg">
      <div class="q-title q-mb-md">登入令牌，然后开始</div>
      <q-btn-group rounded push>
        <q-btn @click="jumpTo('projectlist')"
               :disable="this.token === ''"
               color="primary" class="q-py-sm q-px-xl" label="进入项目列表" />
        <q-btn @click="jumpTo('vdatalist')"
               :disable="this.token === ''"
               color="primary" class="q-py-sm q-px-xl" label="进入可视化列表" />
      </q-btn-group>
    </q-jumbotron>
  </q-page>
</template>

<script>
import {
  mapState
} from 'vuex'

export default {
  name: 'LandingPage',
  computed: {
    ...mapState('subtoken', [
      'token'
    ])
  },
  methods: {
    jumpTo (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style>
</style>
